<template>
<div class="line-wrap">
  <div class="chartName" id="myChart"></div>
  <!-- <div :class="chartName" id="myChart" :style="{height:height}"></div> -->
</div>
</template>
<script>
import $ from 'jquery'
import echarts from 'echarts'
import {EleResize} from '@/utils/resize'
export default {
  // props:{
  //   chartName:{
  //     type:String,
  //     default:'chart'
  //   },
  //   id:{
  //     type:String,
  //     default:'my'
  //   },
  //   width:{
  //     type:String,
  //     default:'100%'
  //   },
  //   height:{
  //     type:String,
  //     default:'100%'
  //   }
  // },
  data() {
    return {
      
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.initCharts()
    })
  },
  methods: {
    resizeCharts(myChart){
      let that=this    
      let resizeDiv=document.getElementById('myChart')
      let listener=function(){
        myChart.resize()
      }
      EleResize.on(resizeDiv,listener)
    },
    initCharts(){     
      let option=this.setOptionParam()  
      // let myChart=echarts.init($('#myChart'))  
      let myChart=echarts.init(document.getElementById('myChart'))   
      myChart.setOption(option)
      this.resizeCharts(myChart)                
    },
    setOptionParam(){
let option = {
    backgroundColor:'#394056',
    title:{
        text:'Request',
        textStyle:{
            color:'#F1F1F3'
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer:{
            lineStyle:{
                color:'#57617B'
            }
        }
    },
    legend: {
        right:'4%',
        icon:'rect',
        itemHeight:5,
        textStyle:{
            color:'#F1F1F3',
        },
        data: ['邮件营销', '联盟广告', '视频广告']
    },
    grid: {
        show:true,
        top:100,
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        borderWidth:0
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine:{
            lineStyle:{
                color:'#57617B'
            }
        },
        data:['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
    },
    yAxis: {
        type: 'value',
        name:'(%)',
        axisTick:{
            show:false,
        },
        axisLabel:{
          margin:10,
          textStyle:{
              fontSize:14
          }  
        },
        axisLine:{
            lineStyle:{
                color:'#57617B'
            }
        },
        splitLine:{
            lineStyle:{
                color: '#57617B'
            }
        }
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            smooth:'true',
            symbol:'circle',
            symbolSize:5,
            showSymbol:false,
            lineStyle:{
                width:1
            },
            areaStyle:{
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(137, 189, 27, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(137, 189, 27, 0)'
              }], false),                
            },
            itemStyle:{
                color:'rgb(137,189,27)',
                borderColor:'rgba(137,189,2,0.27)',
                borderWidth:10
            },
            data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
        },
        {
            name: '联盟广告',
            type: 'line',
            smooth:'true',
            symbol:'circle',
            symbolSize:5,
            showSymbol:false,
            lineStyle:{
                width:1
            },
            itemStyle:{
                color:'rgb(0,136,212)',
                borderColor:'rgba(0,136,212,0.2)',
                borderWidth:12
            },
            areaStyle:{
                color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                [
                    {offset: 0, color: 'rgba(0, 136, 212, 0.3)'},
                    {offset: 0.8, color: 'rgba(0, 136, 212, 0)'},
                    // {offset: 1, color: '#ddd'}
                ]                //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
             shadowBlur: 10
            },
            data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
        },
        {
            name: '视频广告',
            type: 'line',
            smooth:'true',
            symbol:'circle',
            symbolSize:5,
            showSymbol:false,
                      lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(219, 50, 51, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,50,51)',
              borderColor: 'rgba(219,50,51,0.2)',
              borderWidth: 12
            }
          },
            data:  [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
        },
    ]
}
  return option
    }
  },
}
</script>
<style lang="less" scoped>
  .line-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    // min-height: calc(100% - 85px);
    .chartName {
      width: 100%;
      height: 100%;
    }
  }
</style>
